<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />\
    <script src="./jquery-1.11.3.min.js"></script>
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <!-- 加载地图JSAPI脚本 -->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=1bbb09272c3046b700e5f2ab4431c9b1"></script>
    <script>
        console.log(AMap);

        var map = new AMap.Map("container", {
            center: [111.77004,41.589043],
            zoom: 6
        });



        AMap.plugin('AMap.Driving', function () {
            var drivingOption = {
                policy: AMap.DrivingPolicy.LEAST_DISTANCE, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
            }
            // 构造路线导航类
            var driving = new AMap.Driving(drivingOption)

            // 根据起终点经纬度规划驾车导航路线
            driving.search(new AMap.LngLat(111.697599,41.567277), new AMap.LngLat(111.655885,41.527579), function (status, result) {
                // result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                    if (result.routes && result.routes.length) {
                        // 绘制第一条路线，也可以按需求绘制其它几条路线
                        drawRoute(result.routes[0])
                        log.success('绘制驾车路线完成')
                    }
                } else {
                    log.error('获取驾车数据失败：' + result)
                }
            });
        })


        function drawRoute(route) {
            var path = parseRouteToPath(route)

            var startMarker = new AMap.Marker({
                position: path[0],
                map: map
            })

            var endMarker = new AMap.Marker({
                position: path[path.length - 1],
                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
                map: map
            })

            var routeLine = new AMap.Polyline({
                path: path,
                isOutline: true,
                outlineColor: '#ffeeee',
                borderWeight: 2,
                strokeWeight: 5,
                strokeColor: '#0091ff',
                lineJoin: 'round'
            })

            routeLine.setMap(map)

            // 调整视野达到最佳显示区域
            map.setFitView([startMarker, endMarker, routeLine])
        }

        // 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
        // DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
        function parseRouteToPath(route) {
            var path = []

            for (var i = 0, l = route.steps.length; i < l; i++) {
                var step = route.steps[i]

                for (var j = 0, n = step.path.length; j < n; j++) {
                    path.push(step.path[j])
                }
            }

            return path
        }
    </script>
</body>

</html>